<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input clearable
                          v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'sectorId'">
                  <el-option v-for="i in state.optionsPre"
                             :key="i"
                             :label="i.dictValue"
                             :value="i.id"></el-option>
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'payType'">
                  <el-option value="qrcode"
                             label="扫码支付"></el-option>
                  <el-option value="offline"
                             label="线下支付"></el-option>
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status' && state.params.payType == 'qrcode'">
                  <el-option value="0"
                             label="待发起支付" />
                  <el-option value="1"
                             label="支付中" />
                  <el-option value="2"
                             label="已支付" />
                  <el-option value="3"
                             label="已退款" />
                  <el-option value="-1"
                             label="已取消" />
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status' && state.params.payType == 'offline'">
                  <el-option value="0"
                             label="待上传凭证" />
                  <el-option value="1"
                             label="待审核" />
                  <el-option value="2"
                             label="已入账" />
                  <el-option value="3"
                             label="已退款" />
                  <el-option value="-1"
                             label="已取消" />
                  <el-option value="4"
                             label="审核不通过" />
                </el-select>

              </el-form-item>
              <el-form-item v-if="item.type == 'time'">

                <el-date-picker v-if="item.key == 'timexx'"
                                v-model="state.timexx"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                value-format="YYYY-MM-DD"
                                end-placeholder="结束时间" />
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('export')"
                       v-permission="1146">导出</el-button>
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="createdAt"
                           label="充值时间"
                           show-overflow-tooltip
                           align="center"
                           width="180" />
          <el-table-column prop="payType"
                           label="支付方式"
                           show-overflow-tooltip
                           align="center"
                           width="120">
            <template #default="scope">
              <div v-if="scope.row.payType == 'qrcode'"
                   class="primary">扫码支付</div>
              <div v-if="scope.row.payType == 'offline'"
                   class="success">线下支付</div>
            </template>
          </el-table-column>
          <el-table-column prop="orderNo"
                           label="充值订单号"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="bankOrderNo"
                           label="三方订单号"
                           show-overflow-tooltip
                           align="center"
                           width="120" />
          <el-table-column prop="clientCname"
                           label="企业名称"
                           show-overflow-tooltip
                           align="left" />
          <el-table-column prop=""
                           label="状态"
                           show-overflow-tooltip
                           align="center"
                           width="100">
            <template #default="scope">
              <div v-if="scope.row.payType == 'qrcode'">
                <div v-if="scope.row.status == 0"
                     class="info">待发起支付</div>
                <div v-if="scope.row.status == 1"
                     class="success">支付中</div>
                <div v-if="scope.row.status == 2"
                     class="primary">已支付</div>
                <div v-if="scope.row.status == 3"
                     class="warning">已退款</div>
              </div>
              <div v-if="scope.row.payType == 'offline'">
                <div v-if="scope.row.status == 0"
                     class="info">待上传凭证</div>
                <div v-if="scope.row.status == 1"
                     class="success">待审核</div>
                <div v-if="scope.row.status == 2"
                     class="primary">已入账</div>
                <div v-if="scope.row.status == 4"
                     class="error">审核不通过</div>

              </div>
              <div v-if="scope.row.status == -1"
                   class="error">已取消</div>
            </template>
          </el-table-column>
          <el-table-column prop="amount"
                           label="充值金额(元)"
                           show-overflow-tooltip
                           width="120"
                           align="center">
            <!-- <template #default="scope">
              {{ $parse.moneyFormat((scope.row.amount.replace(',','')) / 100 ) }}
            </template> -->
          </el-table-column>
          <el-table-column prop="useAmount"
                           label="充值后余额(元)"
                           show-overflow-tooltip
                           width="140"
                           align="center" />
          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="160"
                           fixed="right">
            <template #default="scope">
              <div class="flex_c btnsDatil">
                <div class="mr10"
                     v-permission="1147"
                     @click="methods.handleAction('edit', scope.row)">查看</div>
                <div class="mr10"
                     v-permission="1148"
                     v-if=" scope.row.payType == 'offline' && scope.row.status == 1"
                     @click="methods.handleAction('return', scope.row,1)">
                  确定充值
                </div>
                <div class="mr10"
                     v-permission="1149"
                     v-if=" scope.row.payType == 'offline' && scope.row.status == 1"
                     @click="methods.handleAction('return', scope.row,2)">拒绝</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
      <el-drawer v-model="state.drawerVisible"
                 title="查看明细"
                 size="35%">
        <div class="drawerConcent">
          <div class="primary fb  f14">充值账号:{{ state.drawerData.clientCname }}
          </div>
          <div class="primary mt20 f14 fb">充值金额：￥{{ state.drawerData.amount  }}</div>
          <div class="title fb mt30">账单明细</div>
          <div class="flex_sb">
            <el-input class="inputShow"
                      v-if="state.drawerData.payType == '扫码支付'"
                      v-model="state.drawerData.clientCname"
                      disabled>
              <template #prepend>&emsp;充值企业</template>
            </el-input>

            <el-input class="inputShow"
                      v-model="state.drawerData.createdAt"
                      disabled>
              <template #prepend>&emsp;创建时间</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.payTime"
                      disabled>
              <template #prepend>&emsp;付款时间</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.orderNo"
                      disabled>
              <template #prepend>&emsp;&emsp;订单号</template>
            </el-input>
            <!-- <el-input class="inputShow"
                      v-model="state.drawerData.cardNo"
                      disabled>
              <template #prepend>&emsp;付款账号</template>
            </el-input> -->
            <el-input class="inputShow"
                      v-model="state.drawerData.userName"
                      disabled>
              <template #prepend>充值管理员</template>
            </el-input>
            <el-input class="inputShow"
                      v-model="state.drawerData.payType"
                      disabled>
              <template #prepend>&emsp;支付方式</template>
            </el-input>
            <el-input class="inputShow"
                      v-if="state.drawerData.payType == '扫码支付'"
                      v-model="state.drawerData.bankOrderNo"
                      disabled>
              <template #prepend>三方订单号</template>
            </el-input>
          </div>
          <div class="title mt26 mb16"
               v-if="state.drawerData.payType == '线下支付'">支付凭证</div>
          <el-image style="width: 300px; height: 200px"
                    v-if="state.drawerData.payType == '线下支付' && state.drawerData.attachUrl"
                    :src="state.drawerData.attachUrl"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="[state.drawerData.attachUrl]"
                    :initial-index="4"
                    fit="cover" />
          <div v-if="state.drawerData.payType == '线下支付' && !state.drawerData.attachUrl"
               class="error tac"> 暂未上传 </div>
          <div class="tar mt20">
            <el-button v-preventReClick
                       type="primary"
                       v-if="state.drawerData.payType == '线下支付' && state.drawerData.status == 1  "
                       @click="methods.handleAction('return','x',1)">确定充值</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('return','x',2)"
                       type="primary"
                       v-if="state.drawerData.payType == '线下支付' && state.drawerData.status == 1 "
                       plain>拒绝</el-button>
            <el-button v-preventReClick
                       @click="state.drawerVisible = false">关闭</el-button>
          </div>
        </div>
      </el-drawer>
      <el-dialog v-model="state.dialogVisible"
                 :title="state.status == 2 ? '拒绝充值':'确定充值'"
                 v-if="state.dialogVisible"
                 :width="$px2rem('500px')">

        <div>
          <div class="mt20 ml30">请核对公账到账情况后再确认充值</div>
          <div class="flex-direction ml30">
            <el-input placeholder="请输入操作密码"
                      class="mt20 mb20 w66"
                      type="password"
                      clearable
                      show-password
                      v-model="state.inputPass"></el-input>
            <el-input placeholder="请输入拒绝理由"
                      class="mt0 mb30 w66"
                      clearable
                      v-if="state.status == 2"
                      v-model="state.inputRefuse"></el-input>
          </div>
        </div>
        <template #footer>

          <div class="dialog-footer">
            <el-button v-preventReClick
                       @click="state.dialogVisible = false,state.inputPass==''">取消</el-button>
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.passSubmit">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    inputRefuse: '',
    loading: false,
    inputPass: '',
    selectValue: "",
    dialogVisible: false,
    drawerVisible: false,
    drawerData: {},
    totalSize: 0,
    timexx: null,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: "10",
      cid: JSON.parse(localStorage.getItem('userInfor')).cid,
      account: JSON.parse(localStorage.getItem('userInfor')).account,

    },
    totalInputColumns: [
      { key: "name", label: "企业名称", type: "input" },
      { key: "payType", label: "选择充值方式", type: "select" },
      { key: "status", label: "选择状态", type: "select" },
      { key: "timexx", label: "账单日期", type: "time" },
    ],
    optionsPre: [],
    dialogData: {},
    selectList: [],
    status: null,
  };
};
const state = reactive(initState());
onMounted(() => {
  state.optionsPre = JSON.parse(localStorage.getItem("profession"));
  methods.getDataList();
});
const methods = {
  passSubmit () {

    let url = null
    if (state.status == 1) {
      url = 'xrw-finace/order/platform/approve'
    }
    if (state.status == 2) {
      url = '/xrw-finace/order/platform/reject'
    }
    app.$httpx.post('xrw-admin/sysconfig/checkPassword', { usePassword: state.inputPass, }).then(res => {
      if (res.code == 200) {
        app.$httpx.post(url, { id: state.drawerData.id, comments: state.inputRefuse }).then(res => {
          if (res.code == 200) {
            ElMessage({
              message: '操作成功',
              type: 'success'
            })
            state.dialogVisible = false
            state.drawerVisible = false
            methods.getDataList();
          }
        })
      } else {
      }
    })
  },
  selectable (row, index) {
    console.log(row);
    if (row.approveStatus == 0) {
      return false;
    } else {
      return true;
    }
  },

  handleAction (type, data, status) {
    switch (type) {
      case "export": //导出
        app.$httpx
          .get(
            `xrw-finace/order/platform/query/export?name=${state.params.name || ''}&account=${state.params.account}&pageNum=${state.params.pageNum}&pageSize=${state.params.pageSize}&startTime=${state.timexx ? state.timexx[0] : ''}&endTime=${state.timexx ? state.timexx[1] : ''}&payType=${state.params.payType || ''}&status=${state.params.status || ''}`,
            { responseType: "arraybuffer" }
          )
          .then((res) => {
            if (res) {
              app.$parse.downloadExcel(res, '充值对账数据')
            }
          });
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        state.timexx = []
        break;
      case "return": //拒绝 
        state.status = status
        if (data !== 'x') {
          state.drawerData = JSON.parse(JSON.stringify(data))
        }
        state.inputPass = ''
        state.dialogVisible = true
        break;
      case "edit": // 编辑
        state.drawerData = JSON.parse(JSON.stringify(data))
        state.drawerData.payType = state.drawerData.payType == 'qrcode' ? '扫码支付' : '线下支付'
        state.drawerVisible = true
        break;
      case "add": // 编辑
        router.push("/enterprise/enterpriseManagement/add");
        break;
      case "dialog": // 其他操作 查看
        state.dialogData = data;
        app.$http.get("/sysuser/account/getTransferUser").then((res) => {
          state.selectList = res.data;
          res.data.forEach((r) => {
            if (r.userName == data.mname) {
              state.selectValue = r;
            }
          });
        });

        state.dialogCheckbox.forEach((res) => {
          for (let key in data) {
            if (res.type == key) {
              if (data[key] == 1) {
                state.checkedValue.push(res.label);
              }
            }
          }
        });
        state.dialogVisible = true;
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘企业?", "删除招聘企业", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/company/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });

        break;
    }
  },
  getDataList () {
    let data = JSON.parse(JSON.stringify(state.params));
    if (state.timexx?.length) {
      data.startTime = state.timexx[0];
      data.endTime = state.timexx[1];
    } else {
      data.startTime = ''
      data.endTime = ''
    }
    state.loading = true
    app.$httpx.get("/xrw-finace/order/platform/query", { params: data }).then((res) => {
      state.tableData = res.data.data;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  ::v-deep(.el-drawer__title) {
    color: rgba(0, 121, 254, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .drawerConcent {
    .title {
      color: rgb(16, 16, 16);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .flex_sb {
      align-items: center;
      flex-wrap: wrap;
      .inputShow {
        margin-top: 16px;
        width: 48%;
        min-width: 260px;
      }
    }
  }
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
